<link rel="stylesheet/less" type="text/css" href="./bricks/component/panel/panel.less"/>
<link rel="stylesheet/less" type="text/css" href="./bricks/component/misc/misc.less"/>
<link rel="stylesheet/less" type="text/css" href="./bricks/component/lister/lister.less"/>
<link rel="stylesheet/less" type="text/css" href="./bricks/component/page/page.less"/>

<div class="ub-container">
    <div class="block-breaker"></div>
    <div class="ub-panel">
        <div class="head">
            <div class="more">
                <a href="#">更多</a>
            </div>
            <div class="title">
                列表
            </div>
        </div>
        <div class="body">

            <div class="ub-lister-search">
                <div class="field">
                    <div class="name">文本：</div>
                    <div class="input">
                        <input type="text" name="" />
                    </div>
                </div>
                <div class="field">
                    <div class="name">下拉：</div>
                    <div class="input">
                        <select class="form" name="">
                            <option value="">[请选择]</option>
                        </select>
                    </div>
                </div>
                <div class="field">
                    <div class="name">单选：</div>
                    <div class="input">
                        <label>
                            <input type="radio" checked name="" />
                            选项1
                        </label>
                        <label>
                            <input type="radio" name="" />
                            选项2
                        </label>
                    </div>
                </div>
                <div class="field">
                    <a href="javascript:;" class="btn btn-primary"><i class="iconfont icon-search"></i> 搜索</a>
                </div>
                <!--<div class="search">-->
                    <!--<a href="javascript:;" class="btn btn-primary"><i class="iconfont icon-search"></i> 搜索</a>-->
                <!--</div>-->
                <div class="batch">
                    <a href="javascript:;" class="btn"><i class="iconfont icon-trash"></i> 批量删除</a>
                </div>
            </div>

            <table class="ub-lister-table">
                <thead>
                <tr>
                    <th>列1</th>
                    <th>列2</th>
                    <th>列3</th>
                    <th>列4</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>值1</td>
                    <td>值2</td>
                    <td>值3</td>
                    <td>值4</td>
                    <td>
                        <a href="#" class="ub-lister-action">修改</a>
                        <a href="#" class="ub-lister-action danger">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="5">
                            <div class="ub-page">
                                <div class="pages">
                                    <a href="#">上一页</a>
                                    <a href="#">1</a>
                                    <a href="#">2</a>
                                    <a href="#">3</a>
                                    <a href="#">4</a>
                                    <a href="#">5</a>
                                    <span>6</span>
                                    <a href="#">10</a>
                                    <a href="#">11</a>
                                    <a href="#">下一页</a>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tfoot>
            </table>


        </div>
    </div>
</div>
